<template>
  <ListPage>
    <template #header>
      <van-nav-bar :fixed="false" title="我的"/>
    </template>
    <van-cell-group title="基本信息" inset>
      <van-cell title="单元格" is-link/>
      <van-cell title="单元格" is-link/>
      <van-cell title="单元格" is-link/>
      <van-cell title="单元格" is-link/>

      <van-cell center title="主题">
        <template #right-icon>
<!--          <van-switch v-model="theme" inactive-value="light" active-value="dark"/>-->
          <van-icon @click="changeTheme" v-show="theme === 'light'" style="font-size: 30px; font-weight: bolder" name="baitianqing"/>
          <van-icon @click="changeTheme" v-show="theme === 'dark'" style="font-size: 30px; font-weight: bolder" name="a-qingtianyewan"/>
        </template>
      </van-cell>
    </van-cell-group>


    <div style="padding: 0 16px; margin: 10px 0">
      <van-button type="primary" @click="logout"
                  style="width: 100%">
        退出登录
      </van-button>
    </div>
  </ListPage>
</template>
<script lang="ts" setup>
import {$notify} from "@plat";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {logoutAction} from "@/request/api";
import {computed} from "vue";
import ListPage from "@hhd/page/ListPage.vue";

const store = useStore();
const router = useRouter();

function clearToken() {
  store.commit('user/setToken', undefined)
  store.commit('user/setUserInfo', undefined)
}

function doLogout() {
  logoutAction({}).then((res: any) => {
    console.log(res)
    clearToken();
    router.replace({name: 'login'})
  }).catch((e: any): void => {
    console.log(e)
  });
}

function changeTheme() {
  if (theme.value === 'light') {
    theme.value = 'dark'
  } else {
    theme.value = 'light'
  }
}

function logout() {
  $notify({
    title: '确定退出登录吗',
    type: 'confirm',
    confirm() {
      doLogout()
    }
  })
}

const theme = computed({
  get() {
    return store.getters.theme;
  },
  set(value) {
    store.commit('app/setTheme', value)
  }
})
</script>